<template>
	<!-- 用户管理列表 -->
	<div style="padding:20px 20px;">
		<el-card class="xiu_box">

			 <div style="width:100%;height:40px;">
				 <el-input clearable @keyup.enter.native="page=1;git_act()" style="width:302px;" placeholder="输入姓名搜索" v-model="recru" class="input-with-select">
				    <el-button @click='page=1;git_act()' slot="append" icon="el-icon-search"></el-button>
				</el-input>
				<!-- <input @change="handleFile" type="file" id="excel-file" style="BACKGROUND-COLOR: transparent;opacity:0;display: none;"> -->
				<!-- <el-button v-show='role==1||role==2' class='topbtn' @click='git_chu' type="warning" icon="el-icon-download" style='float:right;'>导出Excel</el-button> -->
				<!-- <el-button class='topbtn' @click='update' type="success" style='float:right;margin-right:15px;'>导入Excel</el-button> -->
				 <el-button @click='selects(0,false)' type="primary" style='float:right;margin-right:15px;'>注册新用户</el-button>
			 </div>
			<el-table v-loading="loading" :data="tableData"　 stripe style="width:100%;margin-top:20px;">
				<el-table-column header-align='center' align='center' prop="account" label="账号" ></el-table-column>
				<el-table-column header-align='center' align='center' prop="username" label="用户名" ></el-table-column>
        <el-table-column header-align='center' align='center' prop="departmentName" label="部门" ></el-table-column>
        <el-table-column header-align='center' align='center' prop="phoneNum" label="手机号" ></el-table-column>
        <el-table-column header-align='center' align='center' prop="" label="权限" >
          <template slot-scope="scope">{{id_name(scope.row.roleName,$store.state.user.role)}}</template>
        </el-table-column>
				<el-table-column header-align='center' align='center' width="170" label="操作">
					<template slot-scope="scope">
						 <el-button class='btn' @click="selects(1,scope.row)" type="primary">修改</el-button>
						 <el-button class='btn' @click="delect(scope.row)" type="danger">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination :current-page='page' v-show='totals>15' style='margin-top:35px;width:100%;text-align: center;'
			   background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="ye_s"
			  :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="totals">
			</el-pagination>
		</el-card>
    <adduser ref="adduser" :edit="edit" :datas="adddata"></adduser>
	</div>
</template>

<script>
  import adduser from '@/components/MES/adduser.vue'
  import { querys,deletes } from '@/api_bast/user'

	export default {
		components: {adduser},//声明子组件
		computed:{},
		data(){
			return {
        addshow:false,
			  adddata:{
          account:'',//账号
          username:'',//姓名
          password:'',//密码
          numpassword:'',//重复密码
          roleId:'',//权限id
          depId:'',//部门id
          roleName:'',//权限代码
          email:'',//邮箱
          phoneNum:'',//手机号
        },
        edit:0,// 0为注册 1为编辑
				village_code:'',
				group_code:'',
				formLabelWidth:'120px',
				loading:false,
				tableData:[],
				page:1,
				size:15,
				totals:0,
				ye_s:[15,20],
				num:false,//是否为编辑
				recru:'',//查询条件
				textarea:'',

			}
		},
		methods:{
		  qin(){//清除数据方法
		      this.adddata = {
            account:'',//账号
            username:'',//姓名
            password:'',//密码
            numpassword:'',//重复密码
            roleId:'',//id
            depId:'',//部门id
            email:'',//邮箱
            phoneNum:'',//手机号
            salt:'',
            status:'',
          }
      },
			selects(i,num){//编辑 新增
        this.$refs.adduser.qf();
        this.edit = i;
			  if(i==0){
           this.qin();
        }else{
			     this.adddata = num;
          this.adddata.password = '';
        }
			},

			delect(i){
				this.$confirm('确定删除 '+i.username+'的账户吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(()=>{
          this.loading=true;
          deletes({id:i.id}).then(response => {
              if(response.code==200){
                   this.$message({type:'success',message:'删除成功'});
                   if(i.account==this.json_object(this.resData()).account){//判断删除了自己 就退出登录
                       this.$router.push({path:'/'});
                       sessionStorage.resData = undefined;
                       window.setTimeout(()=>{
                         this.$notify.error({title:'错误',message:'账号出现问题请重新登录'});
                       },500)
                   }
                     this.git_act();
              }
              this.loading = false;
          })

        }).catch(()=>{});
			},
			git_act(){//获取数据列表
          let dat= {
                pageNo:this.page,
                pageSize:this.size,
                username:this.recru
					};
          this.loading=true;
          querys(dat).then(response => {
            console.log(response)
            this.totals = response.resData.total;
            this.tableData = response.resData.list;
            this.loading = false;
          })
			},

			handleCurrentChange(val) {//点击页数
					this.page = val;
					this.git_act();
			},
			handleSizeChange(val) {//点击条数
				this.size = val;
				this.git_act();
			},

			// git_chu(){//导出
			// 	let urls =`/xf/index/export_data_xf_wg?village_code=`+this.village_code+`&group_code=`+this.group_code+`&keyword=`+this.recru;
			// 	window.open(urls);
			// },
			// update(){//
			// 	document.querySelector("#excel-file").click();//事件委托
			// },
			// handleFile(e){//上传文件
			//        let fil = e.target.files[0];
			//        var formData = new FormData();
			//        formData.append("flie",fil);
			//        $('#excel-file').val('');//实现可以上传同一个文件
			// 			     $.ajax({
			// 			       url:'/dj/index/import_stream_from_excel',
			// 			       type: 'post',
			// 			        data: formData,
			// 			        contentType: false,
			// 			        processData: false,
			// 			       dataType: 'json',
			// 			       success: (res)=> {
			// 					 if(Object.prototype.toString.call(res) != '[object Object]'){res = JSON.parse(res)}
			// 					 if(res.code==200){
			// 					  this.$message({type: 'success',message: '导入成功!'});
			// 					  this.git_act();
			// 					 }else{this.$message.error(res.msg)}
			// 			       }
			// 			     })
			// },
		},
		mounted(){
			this.git_act();//获取数据

		},
	}
</script>

<style scoped="scoped">
	.xiu_box{width: 100%;}
	.btn{padding:10px 5px;}

</style>
